3. 화면 유형별 샘플 01

화면 유형

크게 두 영역으로 분리됩니다

검색 영역 : 부서코드, 사용자ID, 사용여부
메인 영역 : 타이틀, Grid

form1

UXBooster 활용 기능

take.FormTemp : 기초 코드 자동완성
take.tranSelect : 데이터 조회
takeval.check : 밸리데이션 검증
take.tranCode : 공통코드 조회
takegrid : Grid 공통 기능
take debug window : 디버깅 화면

개발결과물

Mapper : src/main/resources/mappers/sample/Sample01Mapper.xml
Nexacro : nexacro/guide/form/smpForm01.xfdl

Folder 생성

form1

Folder Name 입력

name : form

form2

Form 생성

form3

Form Name 입력

Name : smpForm01

form4

Form Size 입력

Width : 1659 px
Height : 832 px

form5

take.FormTemp

Code Snippet 기능을 활용해 기초 코드를 빠르게 완성할 수 있습니다.

formtemp1

take.FormTemp 결과

영역별로 구분된 기초 코드가 완성되었습니다.

formtemp2

Form onload Event

Form_onload함수를 onload Event에 할당합니다.

formtemp3

Dataset 추가

공통코드(00009)를 위한 dsCboUseYn을 추가합니다.

dataset1

Dataset Column 추가

code : 코드ID
name : 코드명
ref1 : 기타1
ref2 : 기타2
ref3 : 기타3

dataset2

Form_onload 함수 수정

fnInit 함수를 호출합니다.

/*********************************************************
 * 1.2 FORM EVENT 영역(onload등)
 ********************************************************/
/**
 * Form_onload 최초 로드시 발생되는 이벤트 (필수)
 */
this.Form_onload = function(obj:Form, e:nexacro.LoadEventInfo)
{
  if (take.formOnLoad(this))
  {    
    //초기화
    this.fnInit();
  }
};

fnInit 함수 수정

fnInit 함수는 form이 onload되거나 MDI탭에 의해 활성화 될 경우 실행됩니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnInit : 초기화 함수 검색조건 초기화 
 * @return {N/A}    N/A
 * @example this.fnInit();
 */
this.fnInit = function()
{
  // 공통코드
  this.fnCommonCode();
};

fnCommonCode 함수 생성

take.tranCode 함수를 사용하여 공통코드 조회기능을 구현합니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnCommonCode : 코드호출 함수
 * @param  {String} N/A 
 * @example this.fnCommonCode();
 */
this.fnCommonCode = function ()
{
  take.tranCode(
    this,            // 현재 Form 객체
    ["00009"],       // 코드그룹ID : 시스템 - 코드관리
    ["dsCboUseYn"],  // InDataset (코드그룹ID 개수와 동일해야함)
    ["SEL"],         // 콤보헤더용 (ALL:전체, SEL:선택, "":사용안함)
                     // (코드그룹ID 개수와 동일해야함)
    // Callback 함수 (함수명도 사용 가능 ex:"fnCallback")
    function(sId, nErrCd, sErrMsg)  
    {
      // sId     : Transaction Id
      // nErrCd  : Return Code (음수:오류)
      // sErrMsg : Return Message
    },
    true             // true:비동기, false:동기 (기본값은 비동기)
  );
};

QuickView 실행

Eclipse의 Tomcat을 구동시키고 Nexacro Studio의 QuickView를 실행합니다.

quickview1

디버깅 화면 조회

브라우저 빈공간에 ctrl + q를 입력하면 디버깅 화면이 팝업됩니다.
Dataset - this.dsCboUseYn - View 로 이동하여 Dataset을 확인할 수 있습니다.

quickview2

Dataset 추가

공통코드(00017)을 위한 dsCboStatus를 추가합니다.

dataset3

Dataset Column 추가

code : 코드ID
name : 코드명
ref1 : 기타1
ref2 : 기타2
ref3 : 기타3

dataset4

fnCommonCode 함수 수정

코드그룹ID, InDataset을 추가합니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnCommonCode : 코드호출 함수
 * @param  {String} N/A 
 * @example this.fnCommonCode();
 */
this.fnCommonCode = function ()
{
  take.tranCode(
    this,                           // 현재 Form 객체
    ["00009", "00017"],             // 코드그룹ID : 시스템 - 코드관리
    ["dsCboUseYn", "dsCboStatus"],  // InDataset (코드그룹ID 개수와 동일해야함)
    ["SEL", ""],                    // 콤보헤더용 (ALL:전체, SEL:선택, "":사용안함)
                                    // (코드그룹ID 개수와 동일해야함)
    // Callback 함수 (함수명도 사용 가능 ex:"fnCallback")
    function(sId, nErrCd, sErrMsg)  
    {
      // sId     : Transaction Id
      // nErrCd  : Return Code (음수:오류)
      // sErrMsg : Return Message
    },
    true             // true:비동기, false:동기 (기본값은 비동기)
  );
};

QuickView 실행

Eclipse의 Tomcat을 구동시키고 Nexacro Studio의 QuickView를 실행합니다.

quickview2

디버깅 화면 조회

브라우저 빈공간에 ctrl + q를 입력하면 디버깅 화면이 팝업됩니다.
Dataset - this.dsCboStatus - View 로 이동하여 Dataset을 확인할 수 있습니다.

Dataset 추가

이전 단계처럼 Dataset을 추가합니다.

dept1

fnCommonCode 함수 수정

공통코드 조회 Callback 에서 take.tranSelect를 사용한 부서 데이터 조회를 구현합니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnCommonCode : 코드호출 함수
 * @param  {String} N/A 
 * @example this.fnCommonCode();
 */
this.fnCommonCode = function ()
{
  // 변수 선언
  var objDsCboDept;

  objDsCboDept = this.dsCboDept;

  // 부서 Dataset 데이터 비우기
  objDsCboDept.clearData();

  take.tranCode(

    ... 중략 ....

    // Callback 함수 (함수명도 사용 가능 ex:"fnCallback")
    function(sId, nErrCd, sErrMsg)  
    {
      // 부서 데이터 조회
      take.tranSelect
      (
        this,                          // 현재 Form 객체
        "deptList",                    // Transaction Id
        "Sample01.smpFormDeptSelect",  // sqlMapperId
        "",                            // Indataset(서버로 보낼 Dataset)
        "dsCboDept",                   // Outdataset(서버에서 받을 Dataset)
        "",                            // Parameter
        "fnCallback"                   // Callback 함수명 (함수를 바로 사용 가능)
      );
    },
    true             // true:비동기, false:동기 (기본값은 비동기)
  );
};

fnCallback 함수 수정

모든 Transaction에 대한 Callback 작업을 fnCallback에 정의하는것이 기본입니다.
take.tranSelect에서 지정한 Transaction Id로 구분할 수 있으며 조회 이후 동작을 구현할 수 있습니다.

/*********************************************************
 * 5 TRANSACTION OR CALLBACK 콜백 처리부분
 ********************************************************/
/**
 * fnCallback : transaction callback
 * @param  : sId      - 서비스 아이디 (공통 콜백에서 넘어옴)
 * @param  : nErrCd   - 에러코드 (공통 콜백에서 넘어옴)
 * @param  : sErrMsg  - 에러메세지 (공통 콜백에서 넘어옴)
 * @return : N/A
 * @example :  
 */
this.fnCallback = function(sId, nErrCd, sErrMsg)
{
  //Transaction 에러는 공통에서 처리
  switch(sId)
  {
    // 부서 검색조건 조회 콜백
    case "deptList" :
      break;
      
    default :
      break;
  }    
};

검색조건 Layout

1행 3열 Layout을 사용합니다.

검색조건 대상

TB_SMP01을 조회 시 사용할 검색조건입니다.

Desc

TB_SMP01

Component Id

Dataset Column

Inner Dataset

부서코드

DEPT_CD

cboDeptCd

deptCd

dsCboDept

사용자ID

USER_ID

edtUserId

userId

-

사용여부

USE_YN

cboUseYn

useYn

dsCboUseYn

검색 영역용 Div 추가

search1

Div Properties 수정

cssclass : div_WF_search_d1
id : divSearch id를 임의로 변경 하지 말 것
left : 0
top : 0
height : 42
right : 0
minwidth : 1300

search2

Static 추가

divSearch 내부에 Static을 추가합니다.

id : staDeptT id를 임의로 변경 하지 말 것
text : 사용자 부서
left : 20
top : 8
width : 70
height : 24

dept1

Combo 추가

divSearch 내부에 Combo를 추가합니다.

id : cboDept id를 임의로 변경 하지 말 것
left : 90 staDeptT와의 공백 : 0px
top : 8
width : 180
height : 24

dept2

InnerDataset 추가

innerdataset : dsCboDept
code : code
name : name

dept3

기본값 지정

기본값 지정을 위해 fnCallback을 수정합니다.
dsCboDept의 데이터가 존재할 경우 cboDept의 index를 0으로 지정합니다.

/*********************************************************
 * 5 TRANSACTION OR CALLBACK 콜백 처리부분
 ********************************************************/
/**
 * fnCallback : transaction callback
 * @param  : sId      - 서비스 아이디 (공통 콜백에서 넘어옴)
 * @param  : nErrCd   - 에러코드 (공통 콜백에서 넘어옴)
 * @param  : sErrMsg  - 에러메세지 (공통 콜백에서 넘어옴)
 * @return : N/A
 * @example :  
 */
this.fnCallback = function(sId, nErrCd, sErrMsg)
{
  //Transaction 에러는 공통에서 처리
  switch(sId)
  {
    // 부서 검색조건 조회 콜백
    case "deptList" :
      // 변수 선언
      var objDs, objCboDept;

      // 부서 검색조건 Dataset
      objDs = this.dsCboDept;
      objCboDept = this.divSearch.form.cboDept;

      // 부서 검색조건 데이터가 있으면
      if (objDs.rowcount > 0)
      {
        // 부서콤보 첫번째 데이터 세팅
        objDs.insertRow(0);
        objDs.setColumn(0, "code", "");
        objDs.setColumn(0, "name", "전체");

        objCboDept.set_index(0);
      }
      break;
      
    default :
      break;
  }    
};

Static 추가

divSearch 내부에 Static을 추가합니다.

id : staUserIdT id를 임의로 변경 하지 말 것
text : ID
left : 310
top : 8
width : 70
height : 24

userid1

Edit 추가

divSearch 내부에 Edit를 추가합니다.

id : edtUserId id를 임의로 변경 하지 말 것
left : 380 staUserIdT와의 공백 : 0px
top : 8
width : 140
height : 24

userid2

Static 추가

divSearch 내부에 Static을 추가합니다.

id : staUseYnT id를 임의로 변경 하지 말 것
text : 사용여부
left : 560
top : 8
width : 70
height : 24

useyn1

Combo 추가

divSearch 내부에 Combo를 추가합니다.

id : cboUseYn id를 임의로 변경 하지 말 것
left : 630 staUseYnT와의 공백 : 0px
top : 8
width : 140
height : 24

useyn2

InnerDataset 추가

innerdataset : dsCboUseYn
code : code
name : name

useyn3

기본값 지정

기본값 지정을 위해 fnCommonCode를 수정합니다.
dsCboUseYn의 데이터가 존재할 경우 cboUseYn의 index를 0으로 지정합니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnCommonCode : 코드호출 함수
 * @param  {String} N/A 
 * @example this.fnCommonCode();
 */
this.fnCommonCode = function ()
{
  // 변수 선언
  var objDsCboDept, objCboUseYn, objDsCboUseYn;
  
  objDsCboDept = this.dsCboDept;
  objCboUseYn = this.divSearch.form.cboUseYn;
  objDsCboUseYn = this.dsCboUseYn;
  
  ... 중략 ....

  take.tranCode(

    ... 중략 ....

    // Callback 함수 (함수명도 사용 가능 ex:"fnCallback")
    function(sId, nErrCd, sErrMsg)
    {
      // 사용여부 공통코드 데이터가 있는지 여부
      if (objDsCboUseYn.rowcount > 0)
      {
        // 사용여부 검색조건 콤보에 첫번째 값 세팅
        objCboUseYn.set_index(0);
      }
    },
    true             // true:비동기, false:동기 (기본값은 비동기)
  );
};

Dataset 추가

dsSearch를 만들고 아래 컬럼들과 1행을 추가해 줍니다.

userId
useYn
deptCd

dsSearch1

부서코드 Binding

부서코드 cboDeptCd의 value를 Binding 합니다.

Dataset : dsSearch
Column : deptCd

cboDeptCd

사용자ID Binding

사용자ID edtUserId의 value를 Binding 합니다.

Dataset : dsSearch
Column : userId

edtUserId

사용여부 Binding

사용여부 cboUseYn의 value를 Binding 합니다.

Dataset : dsSearch
Column : useYn

cboUseYn

부서코드 onitemchanged

부서코드 Combo를 변경할 때 fnSearch 함수를 호출 합니다.

/*********************************************************
 * 3 각 COMPONENT 별 EVENT 영역
 ********************************************************/
this.divSearch_cboDept_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
  //사용자 목록 조회
  this.fnSearch("userList");
};

사용여부 onitemchanged

사용여부 Combo를 변경할 때 fnSearch 함수를 호출 합니다.

/*********************************************************
 * 3 각 COMPONENT 별 EVENT 영역
 ********************************************************/
this.divSearch_cboUseYn_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
  //사용자 목록 조회
  this.fnSearch("userList");
};

사용자ID onkeydown

사용자ID Edit에서 Enter키 입력될 때 fnSearch 함수를 호출합니다.

/*********************************************************
 * 3 각 COMPONENT 별 EVENT 영역
 ********************************************************/
this.divSearch_edtUserId_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
  //엔터키 다운
  if (e.keycode == nexacro.Event.KEY_ENTER)
  {
    //사용자 목록 조회
    this.fnSearch("userList");
  }
};

Mapper 생성

Eclipse에서 src/main/resources/mappers/sample/Sample01Mapper.xml 를 생성합니다.

Mapper 구조

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="Sample01">
  <!-- 쿼리 영역 -->
</mapper>

부서코드 조회 쿼리

smpFormDeptSelect 를 쿼리 영역에 작성합니다.

<select id="smpFormDeptSelect" parameterType="map" timeout="0" resultType="takeResultMap" useCache="false">
  <![CDATA[
  /*
   * Sample01.smpFormDeptSelect
   * 부서 목록 조회
   * @author takeit
   * @since 2023.04.24
   */
  ]]>
  SELECT DEPT_CD AS CODE
       , DEPT_NM AS NAME
    FROM TB_SMP02
   WHERE PARENT_DEPT = '0'
   ORDER BY DEPT_CD, DEPT_NM
</select>

사용자 목록 조회 쿼리

smpFormSelect 를 쿼리 선언부에 작성합니다.

<select id="smpFormSelect" parameterType="map" timeout="0" resultType="takeResultMap" useCache="false">
  <![CDATA[
  /*
   * Sample01.smpFormSelect
   * 샘플 목록 조회
   * @author takeit
   * @since 2023.04.24
   */
  ]]>
  SELECT USER_CD
       , USER_ID
       , USER_NM
       , USER_BIRTHDAY
       , USER_EMAIL
       , USER_MOBILE
       , USER_TEL
       , USER_FAX
       , DEPT_CD
       , USER_STATUS
       , USE_YN
       , AGREE_YN
       , JOIN_DATE
    FROM TB_SMP01
   WHERE (CASE WHEN USE_YN IS NULL THEN 'N' ELSE USE_YN END) = #{useYn}
   <if test="@kr.co.takeit.util.MybatisUtil@notEmpty( deptCd ) ">
     AND DEPT_CD = #{deptCd}
   </if>
   <if test="@kr.co.takeit.util.MybatisUtil@notEmpty( userId ) ">
     AND USER_ID LIKE <include refid="UxbInc.like"><property name="arg1" value="#{userId}"/></include>
   </if>
   ORDER BY USER_CD
</select>

Tomcat 재시작

Eclipse의 Tomcat을 재시작 합니다.

fnSearch 함수

take.tranSelect를 사용한 TB_SMP01 데이터 조회를 구현합니다.

/*********************************************************
 * 2 필수 FUNCTION 영역
 ********************************************************/
/**
 * fnSearch : 조회 transaction (필수) --> 공통 조회에서 호출할 디폴트값 세팅 필요
 * @param  {String} sTranId 트랜젝션 아이디
 * @return {N/A}    N/A
 * @example this.fnSearch("ID");
 */
this.fnSearch = function(sTranId)
{
  //공통 조회에서 호출할 디폴트값 세팅 필요
  if (take.isEmpty(sTranId)) sTranId = "userList";
  
  switch(sTranId) {   
    case "userList" :
      // 변수 선언
      var objDivSearch, objDsList;
      var sParam;
      
      objDivSearch = this.divSearch.form;
      objDsList    = this.dsList;
      sParam       = "";

      // Dataset 비우기
      objDsList.clearData();

      // 조회
      take.tranSelect(
        this,                      // 현재 Form 객체
        sTranId,                   // Transaction Id
        "Sample01.smpFormSelect",  // SQL Mapper Id
        "dsSearch",                // InDataset(서버로 보낼 Dataset)
        "dsList",                  // OutDataset(서버에서 받을 Dataset)
        "",                        // Parameter
        "fnCallback");             // Callback 함수명(함수를 바로 사용 가능)

      break;

    default:
      break;
    }
  };

fnCallback 함수 수정

switch ~ case구문에 Transaction Id가 userList인 경우를 추가해줍니다.

/*********************************************************
 * 5 TRANSACTION OR CALLBACK 콜백 처리부분
 ********************************************************/
/**
 * fnCallback : transaction callback
 * @param  : sId      - 서비스 아이디 (공통 콜백에서 넘어옴)
 * @param  : nErrCd   - 에러코드 (공통 콜백에서 넘어옴)
 * @param  : sErrMsg  - 에러메세지 (공통 콜백에서 넘어옴)
 * @return : N/A
 * @example :  
 */
this.fnCallback = function(sId, nErrCd, sErrMsg)
{
  //Transaction 에러는 공통에서 처리
  switch(sId)
  {
    // 부서 검색조건 조회 콜백
    case "deptList" :
      ...중략...
      break;
    
    // 조회 콜백
    case "userList" :
      break;

    default :
      break;
  }    
};

Dataset 추가

Dataset을 추가합니다.

TB_SMP01 데이터를 위한 dsList를 추가합니다.

dsList

QuickView를 실행합니다.
검색조건을 변경하여 데이터를 조회합니다.
사용여부를 사용으로 선택합니다.
디버깅 화면을 조회합니다.
ctrl + q를 입력하여 디버깅 화면을 조회합니다.
Dataset - this.dsList - view 로 이동하여 Dataset을 확인할 수 있습니다.
Dataset 컬럼정보를 복사합니다.
XML(all)로 이동하여 Dataset의 ColumnInfo를 복사합니다.
Dataset source를 조회합니다.
Nexacro Studio로 돌아와 dsList의 source로 이동합니다.
Dataset 컬럼을 추가합니다.
ColumnInfo를 붙여넣어 Dataset 컬럼 정보를 간편하게 등록할 수 있습니다.

필수입력 CSS 적용

사용여부 Static과 Combo에 필수입력임을 알려주는 CSS를 적용합니다.

staUseYnT : sta_color_orange
cboUseYn : cmb_WF_essential

fnInit 함수 수정

takeval.add 함수를 사용하여 사용여부를 밸리데이션 검증 대상으로 추가합니다.

/*********************************************************
 * 4 사용자 FUNCTION 영역
 ********************************************************/
/**
 * fnInit : 초기화 함수 검색조건 초기화 
 * @return {N/A}    N/A
 * @example this.fnInit();
 */
this.fnInit = function()
{
  // 공통코드
  this.fnCommonCode();

  // 변수 선언
  var objDivForm;
  objDivForm = this.divSearch.form;
  
  // 밸리데이션 추가
  takeval.add(
    this, 
    "Search",                   // 밸리데이션 그룹 ID(밸리데이션 대상을 그룹으로 관리)
    objDivForm.cboUseYn,        // 밸리데이션 대상
    objDivForm.staUseYnT.text,  // 밸리데이션 명칭
    "value",                    // 밸리데이션 대상 속성(Component:Property, Grid:Cell, Dataset:Column)
    true,                       // Null Check 여부
    "string",                   // Data Type(string, number, date)
    "",                         // Data Length(string:length, number/date:[form,to])
    "");                        // Byte Check 여부(생략가능) 
};

fnSearch 함수 수정

takeval.check 함수를 호출하여 밸리데이션을 검증합니다.

/*********************************************************
 * 2 필수 FUNCTION 영역
 ********************************************************/
/**
 * fnSearch : 조회 transaction (필수) --> 공통 조회에서 호출할 디폴트값 세팅 필요
 * @param  {String} sTranId 트랜젝션 아이디
 * @return {N/A}    N/A
 * @example this.fnSearch("ID");
 */
this.fnSearch = function(sTranId)
{
  //공통 조회에서 호출할 디폴트값 세팅 필요
  if (take.isEmpty(sTranId)) sTranId = "userList";
  
  switch(sTranId) {   
    case "userList" :

      // 밸리데이션 검증
      if(!takeval.check(this, "Search")) return;

      // 변수 선언
      var objDivSearch, objDsList;
      var sParam;

      ...중략...
  }
};

출력 예시

사용여부를 선택하지 않았을 때 밸리데이션 검증을 실패합니다.
그리고 사용자에게 안내 메시지가 출력되며 실패한 Component로 Focus가 이동합니다.

example

메인 영역용 Div 추가

divDetail1

Div Properties 수정

id : divDetail id를 임의로 변경 하지 말 것
left : 0
top : 73
right : 0
bottom : 0
minwidth : 1300

divDetail2

타이틀 Label 추가

divDetail 내부에 Static을 추가합니다.

cssclass : sta_WF_title02
id : staDetailTitle id를 임의로 변경 하지 말 것
text : 사용자 목록
usedecorate : true
left : 0
top : 0
height : 21
right : 0

divDetail3

Grid 추가

divDetail 내부에 Grid를 추가합니다.

divDetail4

Grid Properties 수정

id : grdDetail id를 임의로 변경 하지 말 것
autofittype : col
left : 0
top : 6 ~ staDetailTitle
right : 0
bottom : 0

divDetail5

Dataset Binding

binddataset속성을 dsList로 지정합니다.

divDetail6

binddataset속성을 지정하게 되면 아래와 같이 Dataset의 컬럼들이 Grid에 추가됩니다.

divDetail7

조회 결과

dsList의 데이터가 Grid에 출력되는 것을 확인할 수 있습니다.
아직 Grid 헤더와 너비, 높이, 정렬을 수정해야합니다.
또한 코드로 표현되고있는 셀Text를 명칭으로 변환해야합니다.

divDetail8

Grid Row Size

Head Row의 size를 32로 변경합니다.

divDetail9

Body Row의 size를 30으로 변경합니다.

divDetail10

Head Col

userCd 컬럼을 삭제합니다.

다른 컬럼들은 text와 size를 지정합니다.

Col	text	Size
userId	ID	80
userNm	성명	110
userBirthday	생년월일	120
userEmail	이메일	160
userMobile	모바일	110
userTel	유선전화	110
userFax	팩스	110
deptCd	부서명	100
userStatus	상태	100
useYn	사용여부	100
agreeYn	동의여부	80
joinDate	가입일자	120

부서코드 명칭 적용

displaytype : combotext
combodataset : dsCboDept
- combocodecol : code
- combodatacol : name

divDetail11

사용자상태 명칭 적용

displaytype : combotext
combodataset : dsCboStatus
- combocodecol : code
- combodatacol : name

divDetail12

사용여부 명칭 적용

displaytype : combotext
combodataset : dsCboUseYn
- combocodecol : code
- combodatacol : name

divDetail13

가입일자 Format

displaytype : date
textAlign : center
caldardateformat : yyyy-MM-dd

divDetail14

조회 결과

코드로 표현되고있던 셀Text가 명칭으로 변환되었습니다.
더불어 가입일자도 날짜 형태로 변환되었습니다.

Dateset을 그대로 유지한채 Grid의 셀 출력형태만 변경된 것 입니다.

divDetail15

takegrid 적용

Grid userproperty 를 추가합니다.

Name : takegrid
Value : select

takegrid1

적용 결과

타이틀 우측으로 전체건수가 표현됩니다.
Grid에 순번 컬럼이 추가됩니다.
나머지 기능은 Grid를 우클릭하여 사용할 수 있습니다.

takegrid2

Button 추가

form 영역에 버튼을 추가합니다.

btn1

Button Properties 수정

cssclass : btn_WF_searchFold
id : btnShowHide id를 임의로 변경 하지 말 것
text : 공백
left : 48.76%
top : -1 ~ divSearch
width : 40
height : 16

btn2

메인 영역 `divDetail` Properties 수정

top : -1 ~ btnShowHide

btn3

적용 결과

btn2

Desc	TB_SMP01	Component Id	Dataset Column	Inner Dataset
`부서코드`	DEPT_CD	cboDeptCd	deptCd	dsCboDept
`사용자ID`	USER_ID	edtUserId	userId	-
`사용여부`	USE_YN	cboUseYn	useYn	dsCboUseYn

화면 유형

UXBooster 활용 기능

관련 데이터

개발결과물

Folder 생성

Folder Name 입력

Form 생성

Form Name 입력

Form Size 입력

take.FormTemp

take.FormTemp 결과

Form onload Event

Dataset 추가

Dataset Column 추가

Form_onload 함수 수정

fnInit 함수 수정

fnCommonCode 함수 생성

QuickView 실행

디버깅 화면 조회

Dataset 추가

Dataset Column 추가

fnCommonCode 함수 수정

QuickView 실행

디버깅 화면 조회

Dataset 추가

fnCommonCode 함수 수정

fnCallback 함수 수정

검색조건 Layout

검색조건 대상

검색 영역용 Div 추가

Div Properties 수정

Static 추가

Combo 추가

InnerDataset 추가

기본값 지정

Static 추가

Edit 추가

Static 추가

Combo 추가

InnerDataset 추가

기본값 지정

Dataset 추가

부서코드 Binding

사용자ID Binding

사용여부 Binding

부서코드 onitemchanged

사용여부 onitemchanged

사용자ID onkeydown

Mapper 생성

Mapper 구조

부서코드 조회 쿼리

사용자 목록 조회 쿼리

Tomcat 재시작

fnSearch 함수

fnCallback 함수 수정

Dataset 추가

필수입력 CSS 적용

fnInit 함수 수정

fnSearch 함수 수정

출력 예시

메인 영역용 Div 추가

Div Properties 수정

타이틀 Label 추가

Grid 추가

Grid Properties 수정

Dataset Binding

조회 결과

Grid Row Size

Head Col

부서코드 명칭 적용

사용자상태 명칭 적용

사용여부 명칭 적용

가입일자 Format

조회 결과

takegrid 적용

적용 결과

Button 추가

Button Properties 수정

메인 영역 divDetail Properties 수정

적용 결과

메인 영역 `divDetail` Properties 수정